<template>
  <view class="post-detail-wrapper"
        @click="reportShow = false">
    <view class="head-wrapper">
      <view class="img-wrapper"
            @click.stop="linkToPerson(baseInfo.authorId)">
        <image class="head-image"
               :src="`${$store.state.img_url}${baseInfo.avatar}`"
               mode=""></image>

        <image v-if="baseInfo.starFlag =='1'"
               class="daka-image"
               src="/static/img/daka.png"
               mode=""></image>

      </view>
      <view class="post-desc-name">
        <view class="name">
          {{baseInfo.nickName}}
        </view>
        <view class="text-desc">
          {{baseInfo.intro || "暂无介绍"}}
        </view>
      </view>
      <template v-if="baseInfo.authorId !== $store.state.userInfo.id">
        <view class="attention"
              v-if="baseInfo.attentionFlag==='1'">
          已关注
        </view>
        <view class="attention guanzhu"
              @click="onFollow"
              v-if="baseInfo.attentionFlag==='0'">
          关注
        </view>
      </template>

    </view>
    <view class="post-content">
      <view class="head">
        {{baseInfo.title}}
      </view>
      <view class="post-time-status">
        <view class="time">
          {{baseInfo.sendTime}}
        </view>
        <view class="button-wrapper"
              v-if="baseInfo.subjectType">
          <u-tag style="margin-left:10rpx"
                 v-for="(item, index) in baseInfo.subjectType_dictText.split(',')"
                 :key="index"
                 :text="item"
                 size="mini"
                 bg-color="#fff"
                 color="#21D2FF"
                 border-color="#21D2FF" />
        </view>
      </view>
      <view class=""
            :class="[baseInfo.payFlag ==='1' && baseInfo.payRecordFlag !=='1' && baseInfo.authorId !== $store.state.userInfo.id ?'post-desc-wrapper':'']">
        <u-parse class="post-desc"
                 :html="baseInfo.content"></u-parse>
        <view class="post-unpay"
              @click="payShow = true"
              v-if="baseInfo.payFlag ==='1' && baseInfo.payRecordFlag !=='1' && baseInfo.authorId !== $store.state.userInfo.id">
          <view class="post-btn">查看全文</view>
        </view>
      </view>
      <view class="down-load-wrapper"
            v-if="baseInfo.qtcAttachList.length">
        <view class="down-item"
              @click="onDownLoad(item)"
              v-for="(item, index) in baseInfo.qtcAttachList"
              :key="index">
          <view class="down-link">
            附件：{{item.attachName}}
          </view>
          <image class="download-image"
                 src="/static/img/down_load.png"
                 mode=""></image>
        </view>
      </view>
      <view class="eye-commit-collect">
        <view class="eye-item">
          <u-icon size="48"
                  class="eye-image"
                  name="eye"
                  color="#4D5B80"></u-icon>
          <view class="text">{{baseInfo.readNum || 0}}</view>
        </view>
        <view class="zan-item"
              @click="clkZan">
          <image v-if="baseInfo.thumbsFlag!='1'"
                 class="zan-image"
                 src="/static/img/ic_zan.png"
                 mode=""></image>
          <u-icon class="zan-image"
                  v-if="baseInfo.thumbsFlag=='1'"
                  name="thumb-up-fill"
                  color="#222"
                  size="42"></u-icon>
          <view class="text">{{baseInfo.thumbsNum || 0}}</view>

        </view>
        <view class="collect-item">
          <!-- <image v-if="baseInfo.collectionFlag =='0'"  
					@click="clkFavorites" class="collect-image" src="/static/img/ic_shoucan.png" mode=""></image> -->
          <u-icon v-if="baseInfo.collectionFlag =='0'"
                  @click="clkFavorites"
                  name="star"
                  label-size="20"
                  size="48" />
          <u-icon v-if="baseInfo.collectionFlag =='1'"
                  @click="cancelFavorites"
                  name="star-fill"
                  label-size="20"
                  size="48" />
          <view class="text"></view>
        </view>
        <view class="more-item"
              @click.stop="reportShow = true">
          <image class="more-image"
                 src="/static/img/ic_more.png"
                 mode=""></image>
          <view class="report-wrapper"
                v-if="reportShow">
            <image @click.stop="linkToJubao"
                   v-if="baseInfo.authorId !== $store.state.userInfo.id"
                   class="jubao-image"
                   src="/static/img/jubao.png"
                   mode=""></image>
          </view>
        </view>
        <!--    <u-mask :custom-style="{background: 'transparent'}"
                :show="reportShow"
                @click="reportShow = false"></u-mask> -->
      </view>
      <view class="dialog-container">
        <u-top-tips ref="uTips"></u-top-tips>

        <u-popup :closeable='true'
                 mode='bottom'
                 ref="popup_favorates">
          <scroll-view scroll-y
                       style="max-height: 500rpx; padding-top: 60rpx;">
            <u-cell-item :titleStyle="{fontWeight: 500}"
                         title="选择收藏夹"
                         @click="addFolder()"
                         value="添加" />

            <u-cell-group title-bg-color="rgb(243, 244, 246)">
              <u-cell-item :titleStyle="{fontWeight: 500}"
                           :title="item.clipName"
                           v-for="(item,index) in collectionList"
                           :key="index"
                           @click="chooseFolder(item)" />
            </u-cell-group>

          </scroll-view>
        </u-popup>

        <u-modal ref="editModal"
                 @cancel="cancelEditFolder()"
                 @confirm="confirmEditFolder()"
                 :show-title=false
                 :showCancelButton=true
                 v-model="showEditDialog">
          <view class="slot-content">
            <input class="slot-field"
                   label-width=0
                   v-model="folderName"
                   placeholder="请输入收藏夹名称">
          </view>
        </u-modal>

      </view>
      <view class="exceptional-wrapper"
            v-if="baseInfo.authorId !== $store.state.userInfo.id">
        <image @click="onReward"
               class="money-image"
               src="/static/img/money.png"
               mode=""></image>
        <view class="money-text">
          已有{{baseInfo.rewardNum || 0}}人打赏
        </view>
      </view>
      <view></view>
      <view v-if="!closeAd"
            class="news-wrapper">
        <view class="img-wrapper">
          <image @click="adClose"
                 class="close-image"
                 src="/static/img/ic_close.png"
                 mode=""></image>
        </view>
        <view class="news-item"
              @click="newsLinkTo(item)"
              v-for="(item ,index) in adList"
              v-if="index==0"
              :key="index">
          <view class="new-title">
            {{item.adviceName}}
          </view>
          <view class="new-content">
            <image v-if="item.adviceImg"
                   class="image-left"
                   :src="item.adviceImg"
                   mode=""></image>
            <view class="news-right">
              {{item.adviceIntro || "暂无内容"}}
            </view>
          </view>
        </view>
      </view>
      <view class="comment-wrapper">
        <view class="comment-title">
          全部评论（{{commentTotal}}）
        </view>
        <view class="comment-content">
          <view class="comment--item"
                v-for="(item, index) in commentList"
                :key="index">
            <view class="head-wrapper-comment"
                  @click.stop="linkToPerson(item.userId)">
              <image class="head-image"
                     :src="`${$store.state.img_url}${item.avatar}`"
                     mode=""></image>
              <image v-if="item.starFlag ==='1'"
                     class="daka-image"
                     src="/static/img/daka.png"
                     mode=""></image>
            </view>
            <view class="right-wrapper">
              <view class="auther-self">
                <view class="name">
                  <text class="position">{{item.name}}</text><text v-if="item.userId === baseInfo.authorId"
                        class="author">作者</text>

                </view>
                <view class="desc">
                  {{item.comment}}
                </view>
                <view class="time-comment-zan">
                  <view class="time">
                    {{item.createTime}}
                  </view>
                  <view class="comment-wraper">
                    <view v-if="$store.state.userInfo.id === baseInfo.authorId"
                          class="call-back"
                          @click="onOtherComment(item, index)">
                      回复
                    </view>
                    <image v-if="item.thumbsFlag ==='0'"
                           @click="commentZan(item, index)"
                           class="zan-image"
                           src="/static/img/ic_zan.png"
                           mode=""></image>
                    <u-icon v-else
                            @click='commentZan(item, index)'
                            name="thumb-up-fill"
                            size="40" />
                    <view style="margin-left:5rpx">{{item.thumbsNum}}</view>
                  </view>
                </view>
              </view>
              <view class="ohter-comment-wrapper"
                    v-if="item.nextCommentList.length">
                <view class="comment-item"
                      v-for="(nextItem, y) in item.nextCommentList"
                      :index="y">
                  <view class="head-wrapper-comment"
                        @click.stop="linkToPerson(nextItem.userId)">
                    <image class="head-image"
                           :src="`${$store.state.img_url}${nextItem.avatar}`"
                           mode=""></image>
                    <image v-if="nextItem.starFlag ==='1'"
                           class="daka-image"
                           src="/static/img/daka.png"
                           mode=""></image>
                  </view>
                  <view class="commit-right">
                    <view class="commit-right-item">
                      <view class="name">
                        <text class="position">{{nextItem.name}}</text><text v-if="nextItem.userId === baseInfo.authorId"
                              class="author">作者</text>
                        <text v-if="nextItem.userId === baseInfo.authorId"
                              class="call-back">回复</text>
                      </view>
                      <view class="desc">
                        {{nextItem.comment}}
                      </view>
                      <view class="time-comment-zan">
                        <view class="time">
                          {{nextItem.createTime}}
                        </view>
                        <view class="comment-wrapper-right">
                          <!-- <view class="call-back">
													回复
												</view> -->
                          <image v-if="nextItem.thumbsFlag ==='0'"
                                 @click='commentZan(nextItem, index)'
                                 class="zan-image"
                                 src="/static/img/ic_zan.png"
                                 mode=""></image>
                          <u-icon v-else
                                  @click='commentZan(nextItem, index)'
                                  name="thumb-up-fill"
                                  size="40" />
                          {{nextItem.thumbsNum || 0}}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <view class="search-wrapper">
      <u-input placeholder="参与讨论"
               :focus="focus"
               ref="inputRef"
               v-model="comment"
               class="search-input"
               type="text"
               :border="false"
               @blur="commentBlur"
               @confirm="onComment" />
      <!-- @search="onComment" -->
      <view @click="onComment" class="search-right">提交</view>
    </view>
    <u-mask :show="payShow"
            @click="payShow = false">
      <view class="pay-wrapper">
        <view class="rect"
              @tap.stop>
          <view class="head-title">
            付费阅读
          </view>
          <view class="content">
            该帖子/文章内容需要付费后阅读，请支付
          </view>
          <view class="pay-money">
            ¥{{baseInfo.money || 0}}
          </view>
          <view class="btn-wrapper">
            <view class="btn-cancel"
                  @click="payShow = false">
              取消
            </view>
            <view class="btn-confirm"
                  @click="onPay">
              支付
            </view>
          </view>
        </view>
      </view>
    </u-mask>
    <u-loadmore :status="loadStatus"
                @loadMore="loadMoreHandle"
                bgColor="#ffffff"></u-loadmore>
  </view>
</template>

<script>
import $store from "@/store/index.js";
import apis from "@/apis.js";
export default {
  data() {
    return {
      userInfo: $store.state.userInfo,
      loadStatus: "loadmore",
      comment: "",
      id: "",
      baseInfo: {},
      collectionList: [],
      reportShow: false,
      payShow: false,
      showEditDialog: false,
      artId: "",
      form: {
        pageNo: 1,
        pageSize: 20,
      },
      commentList: [],
      folderName: "",
      commentTotal: 0,
      focus: false,
      adList: [],
      adVisible: true,
      ohterComment: {
        id: null,
        index: 0,
      },
      closeAd: false,
      userHead: "",
    };
  },

  onShow() {
    this.getDate();
    this.reportShow = false;
    this.id = this.$route.query.id;
    console.log("onshow", this.$route)
    uni.setNavigationBarTitle({
      title: "帖子详情",
    });
    this.commentList = [];
    this.form.pageNo = 1;
    this.getList();
    this.getCommentList();
    this.getCollectList();
    this.getAd();
		wx.getStorage({
			key: 'adDetail',
			success: (res) => {
				this.closeAd = res.data
			}
		})
    this.userHead = `${this.$store.state.img_url}${this.$store.state.userInfo.avatar}`;

    if (this.$route.query.type) {
      this.focus = false;
      this.$nextTick(() => {
        this.focus = true;
      });
    }

  },
  methods: {
    linkToPerson(id) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/personHome",
        params: {
          id,
        },
      });
    },
    newsLinkTo(item) {
			if (item.urlType === '1') {
				window.open(item.externalUrl);
			}
    },
    commentBlur() {
      this.ohterComment.id = null;
    },
    adClose() {
			this.closeAd = true;
			uni.setStorage({
			  key:"adDetail",
			  data: true
			})
      
    },
    // 获取广告
    getAd() {
      this.$http.get(apis.getListByAdviceType_adviceType, {}).then((res) => {
        if (res.data.code === 200) {
          this.adList = res.data.result.map((item) => {
            return {
              ...item,
              adviceImg: `https://qitianapp.fornewtech.com/api${item.adviceImg}`,
            };
          });
          this.$forceUpdate();
        }
      });
    },
    // 关注
    onFollow(item) {
      this.$http
        .post(apis.attention, { authorId: this.baseInfo.authorId })
        .then((res) => {
          if (res.data.code === 200) {
            this.baseInfo.attentionFlag = "1";
            this.$refs.uTips.show({
              title: "关注成功",
              type: "success",
              duration: "2300",
            });
          }
        });
    },
    // 无限加载 利用公共方法判断
    onReachBottom() {
      this.form.pageNo = this.form.pageNo + 1;
      this.getCommentList();
    },
    loadMoreHandle() {
      this.form.pageNo = this.form.pageNo + 1;
      this.getList();
    },
    // 根据id获取评论列表
    getCommentList() {
      this.loadStatus = "loading";
      this.$http
        .get(`${apis.getCommentPageByArtId}`, {
          artId: this.id,
          ...this.form,
        })
        .then((res) => {
          if (res.data.code === 200) {
            // if (this.form.pageNo == 1) {
            // 	this.commentList = []
            // }
            if (!res.data.result.records.length && this.form.pageNo !== 1) {
              this.form.pageNo = this.form.pageNo - 1;
            }
            let data = this.commentList.concat(res.data.result.records);
            this.commentList = data;
            this.commentTotal = res.data.result.total;
            if (res.data.result.total === this.commentList.length) {
              this.loadStatus = "nomore";
              this.isDot = true;
            } else {
              this.loadStatus = "loadmore";
              this.isDot = false;
            }
          }
        });
    },
    onOtherComment(item, index) {
      this.focus = false;
      this.$nextTick(() => {
        this.focus = true;
      });
      console.log("sdf", item);
      this.ohterComment.id = item.id;
      this.ohterComment.index = index;
      this.onComment(item);
    },
    onComment(item) {
      if (!this.comment) {
        return false;
      }
      let userInfo = this.$store.state.userInfo;
      if (userInfo.authenticationFlag === "2" || userInfo.starFlag === "1") {
        this.$http
          .post(apis.comment_save, {
            artId: this.baseInfo.id,
            comment: this.comment,
            parentId: this.ohterComment.id,
          })
          .then((res) => {
            if (res.data.code === 200) {
              // this.commentList = []
              // this.form.pageNo = 1
              // this.comment = ""

              if (this.ohterComment.id) {
                this.commentList[this.ohterComment.index].nextCommentList.push({
                  avatar: this.$store.state.userInfo.avatar,
                  comment: this.comment,
                  createTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
                  id: 0,
                  name: this.$store.state.userInfo.nickName,
                  parentId: item.id,
                  starFlag: this.$store.state.userInfo.starFlag,
                  thumbsFlag: "0",
                  thumbsNum: 0,
                  userId: this.$store.state.userInfo.id,
                });
                console.log(
                  "head",
                  `https://qitianapp.fornewtech.com/api/${this.$store.state.userInfo.avatar}`
                );
              } else {
                this.commentList = [];
                this.form.pageNo = 1;
                this.getCommentList();
              }
              this.$refs.uTips.show({
                title: this.ohterComment.id ? "回复成功" : "评论成功",
                type: "success",
                duration: "2300",
              });
              this.ohterComment.id = 0;
              this.comment = "";
            }
          });
      } else {
        uni.showModal({
          title: "提示",
          content: "认证后才能进行该操作，是否前往认证？",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/authentication/remind?auditType=1",
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },

    getDate() {
      Date.prototype.Format = function (fmt) {
        // author: meizz
        var o = {
          "M+": this.getMonth() + 1, // 月份
          "d+": this.getDate(), // 日
          "h+": this.getHours(), // 小时
          "m+": this.getMinutes(), // 分
          "s+": this.getSeconds(), // 秒
          "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), // 毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
        return fmt;
      };
    },

    clkZan() {
      let url =
        this.baseInfo.thumbsFlag === "1" ? apis.thumbsCancel : apis.thumbsAgree;
      this.$http.post(url, { id: this.baseInfo.id }).then((res) => {
        if (res.data.code === 200) {
          // this.getList()
          if (this.baseInfo.thumbsFlag == "1") {
            this.baseInfo.thumbsFlag = "0";
            this.baseInfo.thumbsNum = this.baseInfo.thumbsNum - 1;
          } else {
            this.baseInfo.thumbsFlag = "1";
            this.baseInfo.thumbsNum = this.baseInfo.thumbsNum + 1;
          }
          this.$refs.uTips.show({
            title: this.baseInfo.thumbsFlag === "1" ? "点赞成功" : "取消成功",
            type: "success",
            duration: "2300",
          });
        }
      });
    },
    // 评论点赞
    commentZan(item, index) {
      console.log("commentZan", item);
      let url =
        item.thumbsFlag === "1" ? apis.comment_cancel : apis.comment_agree;
      this.$http
        .post(url, {
          commentId: item.id,
        })
        .then((res) => {
          if (res.data.code === 200) {
            // this.getList()
            if (item.thumbsFlag === "0") {
              item.thumbsFlag = "1";
              item.thumbsNum = item.thumbsNum + 1;
            } else {
              item.thumbsFlag = "0";
              item.thumbsNum = item.thumbsNum - 1;
            }
            this.$refs.uTips.show({
              title: item.thumbsFlag === "1" ? "点赞成功" : "取消成功",
              type: "success",
              duration: "2300",
            });
          }
        });
    },
    confirmEditFolder(index) {
      this.showEditDialog = true;
      if (!this.folderName) {
        uni.showToast({
          title: "文件夹名称不能为空",
          icon: "none",
        });
        return;
      }
      this.$http
        .post(apis.collectionAdd, {
          artId: this.baseInfo.id,
          clipId: 0,
          clipName: this.folderName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$refs.uTips.show({
              title: "创建成功",
              type: "success",
              duration: "2300",
            });
            this.folderName = ""
            this.showEditDialog = false;
            // this.baseInfo.collectionFlag = "1";
            this.getCollectList()
          }
        });
    },
    cancelEditFolder() {
      console.log("cancel");
      // this.folderName = ''
    },
    clkFavorites() {
      this.$refs.popup_favorates.open();
    },
    chooseFolder(item) {
      this.setFavorates(item);
      this.$refs.popup_favorates.close();
    },
    cancelFavorites(item) {
      this.$http
        .post(apis.collection_delete, {
          artId: this.baseInfo.id,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$refs.uTips.show({
              title: "取消成功",
              type: "success",
              duration: "2300",
            });
            this.baseInfo.collectionFlag = "0";
            console.log("this.ba", this.baseInfo);
            this.$forceUpdate();
            // this.getList()
          }
        });
    },

    setFavorates(item) {
      this.$http
        .post(apis.collection_context, {
          artId: this.baseInfo.id,
          clipId: item.id,
          clipName: item.clipName,
          contextId: item.clipName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$refs.uTips.show({
              title: "收藏成功",
              type: "success",
              duration: "2300",
            });
            this.getList();
          }
        });
    },
    addFolder(item) {
      this.showEditDialog = true;
      // 文章id
      // this.artId = item.id
      // this.$refs.popup_favorates.close();
    },
    getCollectList() {
      this.$http.get(apis.collectionList).then((res) => {
        if (res.data.code === 200) {
          this.collectionList = res.data.result;
        }
      });
    },
    onPay() {
			let that = this
      this.$http
        .post(apis.artical_pay, {
          artId: this.baseInfo.id,
          payAmount: this.baseInfo.money,
          paySouc: "gzh",

        })
        .then((res) => {
          if (res.data.code === 200) {
            let data = res.data.result;
            if (data && data.appid) {
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: data.appid, //公众号ID，由商户传入
                  timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: data.nonce_str, //随机串
                  package: data.packageStr,
                  signType: data.signType, //微信签名方式：
                  paySign: data.sign, //微信签名
                },
                function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    uni.showToast({
                      title: "支付成功",
                      icon: "none",
                    });
										that.payShow = false;
										that.baseInfo.payRecordFlag = "1"
                  }
                }
              );
            } else {
              this.payShow = false;
              this.baseInfo.payRecordFlag = "1"
            // this.getList();

            }
          }
        });
    },
    onReward() {
      this.$u.route({
        url: "pages/post/reward/reward",
        params: {
          id: this.baseInfo.id,
        },
      });
    },
    linkToJubao() {
      let userInfo = this.$store.state.userInfo;
      if (userInfo.authenticationFlag === "2" || userInfo.starFlag === "1") {
        this.$u.route({
          url: "pages/post/report/report",
          params: {
            id: this.baseInfo.id,
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "认证后才能进行该操作，是否前往认证？",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/authentication/remind?auditType=1",
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    onDownLoad(item) {
      location.href = `${this.$store.state.img_url}${item.url}`
      // uni.downloadFile({
      //   url: `${this.$store.state.img_url}${item.url}`, //仅为示例，并非真实的资源
      //   header: {
      //     Authorization: this.$store.state.TOKEN,
      //   },
      //   success: (res) => {
      //     if (res.statusCode === 200) {
			// 			uni.showToast({
			// 				title: "下载成功",
			// 				icon: 'none'
			// 				})
      //       // this.$refs.uTips.show({
      //       //   title: "下载成功",
      //       //   type: "success",
      //       //   duration: "2300",
      //       // });
      //       console.log("下载成功", res);
			// 			this.saveImg(res.tempFilePath)
      //     }
      //   },
      // });
    },
    saveImg: function (url) {
      let oA = document.createElement("a");
      oA.download = ""; // 设置下载的文件名，默认是'下载'
      oA.href = url;
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    },
    getList() {
      this.loadStatus = "loading";
      this.$http.get(`${apis.article_detail}/${this.id}`).then((res) => {
        if (res.data.code === 200) {
          this.baseInfo = res.data.result;
          this.baseInfo.subjectType_dictText = res.data.result
            .subjectType_dictText
            ? res.data.result.subjectType_dictText
            : "";
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "uview-ui/index.scss";
.slot-content {
  display: flex;
  flex-flow: column nowrap;
  font-size: 31rpx;
  color: $u-content-color;
  padding: 80rpx 40rpx;

  .slot-field {
    width: auto;
    text-align: center;
  }
}
.pay-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  .rect {
    width: 75%;
    // width: 720rpx;
    height: 500rpx;
    background: #ffffff;
    opacity: 1;
    padding: 54rpx 30rpx 54rpx 30rpx;

    .head-title {
      font-size: 32rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 42rpx;
      color: #4d5b80;
      margin-bottom: 40rpx;
    }
    .content {
      font-size: 32rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 42rpx;
      color: #4d5b80;
      margin-bottom: 32rpx;
    }
    .pay-money {
      font-size: 64rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #4d5b80;
      opacity: 1;
      margin-bottom: 50rpx;
      text-align: center;
    }
    .btn-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      .btn-confirm {
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background: #3fa7ff;
        box-shadow: -4rpx -4rpx 12rpx #ffffff;
        opacity: 1;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #ffffff;
      }
      .btn-cancel {
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background: #e9ebf4;
        box-shadow: -4rpx -4rpx 12rpx #ffffff;
        opacity: 1;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #4d5b80;
        opacity: 1;
        margin-right: 60rpx;
      }
    }
  }
}
.post-detail-wrapper {
  padding: 40rpx 30rpx;
  padding-bottom: 100rpx;
  .head-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #bfbfbf;
    padding-bottom: 24rpx;
    .img-wrapper {
      position: relative;
      width: 96rpx;
      .head-image {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
      .daka-image {
				position: absolute;
				width: 94rpx;
				height: 40rpx;
				bottom: 0;
				right: 0px;
      }
    }
    .post-desc-name {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 16rpx;
      .name {
        font-size: $title-font;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #4d5b80;
        // margin-bottom: 24rpx;
      }
      .text-desc {
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #4d5b80;
        opacity: 1;
        text-overflow: ellipsis;
        width: calc(100vw - 296rpx);
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .attention {
      width: 120rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      background: #e9ebf4;
      box-shadow: -4rpx -4rpx 12rpx #ffffff;
      opacity: 1;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #4d5b80;
      opacity: 1;
    }
    .guanzhu {
      background: #3fa7ff;
      color: #e9ebf4;
    }
  }
  .post-content {
    margin-top: 24rpx;
    .head {
      font-size: 40rpx;
      font-family: SimHei;
      font-weight: 400;
      color: $text-color;
      opacity: 1;
      margin-bottom: 24rpx;
    }
    .post-time-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32rpx;
      .time {
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: $econdary-word-color;
        opacity: 1;
      }
    }
  }
  .post-desc-wrapper {
    position: relative;
    height: 600rpx;
    overflow: hidden;
    border-bottom: 2rpx solid #bfbfbf;
    .post-desc {
      margin-top: 16rpx;
      padding-bottom: 24rpx;
      font-size: 32rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 48rpx;
      color: #4d5b80;
      border-bottom: 2rpx solid #bfbfbf;
    }
    .post-unpay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 252rpx;
      background: #ffffff;
      opacity: 0.77;
      display: flex;
      justify-content: center;
      align-items: center;
      .post-btn {
        width: 298rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        background: #3fa7ff;
        box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
        opacity: 1;
        font-size: 32rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .down-load-wrapper {
    padding-bottom: 32rpx;
    margin-top: 32rpx;
    border-bottom: 2rpx solid #bfbfbf;
    .down-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .down-link {
      font-size: 32rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #4d5b80;
      text-decoration: underline;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .download-image {
      width: 52rpx;
      height: 48rpx;
    }
  }
  .eye-commit-collect {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 40rpx;
    padding-bottom: 40rpx;
    .eye-item,
    .zan-item,
    .collect-item,
    .more-item {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .more-item {
      justify-content: flex-end;
      position: relative;
      .report-wrapper {
        position: absolute;
        right: 0;
        top: 28rpx;
        background: #eff1f7;
        box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 4rpx;
        padding: 8rpx 18rpx;
        z-index: 10075;
        display: flex;
        align-items: center;
        justify-content: center;
        .jubao-image {
          width: 36rpx;
          height: 40rpx;
        }
        .share-image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 20rpx;
        }
      }
    }
    .eye-image {
      font-size: 48rpx;
    }
    .zan-image {
      width: 41rpx;
      height: 40rpx;
    }
    .collect-image {
      width: 40rpx;
      height: 40rpx;
    }
    .more-image {
      width: 40rpx;
      height: 8rpx;
    }
    .text {
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #4d5b80;
      margin-left: 8rpx;
    }
  }
  .exceptional-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    .money-image {
      width: 108rpx;
      height: 120rpx;
    }
    .money-text {
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #4d5b80;
      margin-top: 16rpx;
    }
  }
  .news-wrapper {
    margin-top: 32rpx;
    border-top: 2rpx solid #bfbfbf;
    padding-top: 32rpx;

    .news-item {
      margin-bottom: 40rpx;
      border-bottom: 2rpx solid #bfbfbf;
      &:last-child {
        border-bottom: 0;
      }
    }
    .img-wrapper {
      text-align: right;
      .close-image {
        width: 24rpx;
        height: 24rpx;
      }
    }
    .new-title {
      margin-bottom: 26rpx;
    }
    .new-content {
      display: flex;
      align-items: flex-start;
      padding-bottom: 36rpx;
      &:last-child {
        padding-bottom: 0;
      }
      .image-left {
        width: 240rpx;
        height: 180rpx;
        background: rgba(0, 0, 0, 1);
        opacity: 0.8;
        border-radius: 8rpx;
        flex-shrink: 0;
      }
      .news-right {
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        line-height: 32rpx;
        color: $econdary-word-color;
        margin-left: 16rpx;
      }
    }
  }
  .comment-wrapper {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    box-sizing: border-box;

    .comment-title {
      font-size: 40rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #000000;
      margin-bottom: 24rpx;
      border-top: 2rpx solid #bfbfbf;
      padding-top: 24rpx;
    }
    .comment-content {
      .comment--item {
        border-bottom: 2rpx solid #bfbfbf;
        display: flex;
        align-items: flex-start;
        margin-top: 24rpx;
      }
      .head-wrapper-comment {
        position: relative;
        width: 96rpx;
        margin-right: 24rpx;
        .head-image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
        }
        .daka-image {
				position: absolute;
				width: 94rpx;
				height: 40rpx;
				bottom: 0;
				right: 0px;
        }
      }
      .right-wrapper {
        flex: 1;
        width: calc(100% - 120rpx);
        .auther-self {
          .name {
            font-size: $title-font;
            font-family: SimHei;
            font-weight: 400;
            color: #4d5b80;
            height: 96rpx;
            display: flex;
            align-items: center;
            .author {
              border: 2rpx solid #3d92ca;
              opacity: 1;
              border-radius: 8rpx;
              padding: 4rpx 8rpx;
              margin-left: 8rpx;
              margin-right: 16rpx;
              font-size: 24rpx;
              font-family: SimHei;
              font-weight: 400;
              color: #3d92ca;
            }
          }
          .desc {
            font-size: 28rpx;
            font-family: SimHei;
            font-weight: 400;
            color: #4d5b80;
            margin-bottom: 24rpx;
            white-space: pre-wrap;
            word-break: break-all;
          }
          .time-comment-zan {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;
            .time {
              font-size: 24rpx;
              font-family: SimHei;
              font-weight: 400;
              color: $econdary-word-color;
            }
            .comment-wraper {
              display: flex;
              align-items: center;
              .call-back {
                font-size: 28rpx;
                font-family: SimHei;
                font-weight: 400;
                color: #000000;
                margin-right: 16rpx;
              }
              .zan-image {
                width: 41rpx;
                height: 40rpx;
                margin-right: 2rpx;
              }
            }
          }
        }
        .ohter-comment-wrapper {
          .comment-item {
            display: flex;
            align-items: flex-start;
            .commit-right {
              flex: 1;
              .commit-right-item {
                display: flex;
                flex-direction: column;
              }
              .name {
                font-size: $title-font;
                font-family: SimHei;
                font-weight: 400;
                color: #4d5b80;
                height: 96rpx;
                display: flex;
                align-items: center;
                .author {
                  border: 2rpx solid #3d92ca;
                  opacity: 1;
                  border-radius: 8rpx;
                  padding: 4rpx 8rpx;
                  margin-left: 8rpx;
                  margin-right: 16rpx;
                  font-size: 24rpx;
                  font-family: SimHei;
                  font-weight: 400;
                  color: #3d92ca;
                }
              }
              .desc {
                font-size: 28rpx;
                font-family: SimHei;
                font-weight: 400;
                color: #4d5b80;
                margin-bottom: 24rpx;
              }
              .time-comment-zan {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                .time {
                  font-size: 24rpx;
                  font-family: SimHei;
                  font-weight: 400;
                  color: $econdary-word-color;
                }
                .comment-wrapper-right {
                  display: flex;
                  align-items: center;
                  .call-back {
                    font-size: 28rpx;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #000000;
                    margin-right: 16rpx;
                  }
                  .zan-image {
                    width: 41rpx;
                    height: 40rpx;
                    margin-right: 2rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .search-wrapper {
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #e9ebf4;
    padding-left: 16rpx;
    display: flex;
    align-items: center;
    
  }
  .search-right {
    background: #3fa7ff;
    color: #e9ebf4;
    padding: 0 30rpx;
  }
}
</style>
